@font-face {
  font-family:'Gotham Black';
  src : url('../fonts/Gotham Black.otf')  format('opentype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Gotham Medium';
  src : url('../fonts/Gotham-Medium.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Gotham Book';
  src : url('../fonts/Gotham-Book.otf')  format('opentype'); /* Safari, Android, iOS */
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #f8f7fa;
  color: #333;
}

.calendar {
  top: 52%;
  left: 22%;
  margin-top: 5px;
  margin-left: 30px;
  width: 360px;
  padding: 15px;
  box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  overflow: hidden;
}
.calendar--nav {
  margin: -15px 0px 0px;
  padding: 0 15px;
  background-color: #e7ece9;
  color: #ce7e5d;
  height: 70px;
  position: relative;
}
.calendar--nav a {
  position: absolute;
  cursor: pointer;
  left: 250px;
  font-size: 32px;
  line-height: 0.5;
  top: 28px;
  width: 30px;
  text-align: center;
  display: inline-block;
  color: #A9A9A9  !important;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.calendar--nav a:hover {
  color: #A9A9A9;

}
.calendar--nav a:last-child {
  left: auto;
  right: 10px;

}
.calendar--nav h1 {
  margin: 0;
  position: absolute;
  left: -90px;
  right: 40px;
  text-align: center;
  cursor: pointer;
  font-weight: 550;
  font-size: 25px;
  line-height: 66px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
          font-family: 'proxima-nova', sans-serif;
     
}

.calendar--nav small {
  font-weight: 550;
  font-size: 85%;
  font-family: 'proxima-nova', sans-serif;

}
.calendar--days {
  font-size: 0;
  background-color: #e7ece9;
}

.calendar--days span {
  width: 14.28571%;
  display: inline-block;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  margin: 8px 0;
  line-height: 34px;
  position: relative;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight:normal;
}
.calendar--days span.label {

  font-weight: 700;
  color: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  cursor: pointer;
}
.calendar--days span.active {
  font-weight: 700;
  background-color: #DCDCDC !important;
  color:black !important;
  border-radius:50% !important;
  width:36px ;
  margin-left:10px;

}
.calendar--days span.muted {
  color: #e7ece9;
}
.calendar--days span.between {
  border-radius: 0;

}
.calendar--days span.start, .calendar--days span.between, .calendar--days span.end {
  background-color: #DCDCDC;
  color: black;

}
.calendar--days span.start {
  border-radius: 12px 0 0 12px;
  background-color:#ce7e5d !important;
  border-radius:50% !important;
  color:white !important;
  width:36px ;
}
.calendar--days span.end {
  border-radius: 0 12px 12px 0;
}
.calendar--days span.start.end {
  border-radius: 12px;
}


.calendar--days span.start.end:after {
  display: none;
}